<template>
    <header>
        <h1>航空大数据可视化</h1>
        <div class="showTime"></div>
    </header>
</template>

<script>
    let t = null
    t = setTimeout(time, 1000) //开始运行
    function time() {
        clearTimeout(t); //清除定时器
        let dt = new Date()
        let y = dt.getFullYear()
        let m = dt.getMonth() + 1
        let d = dt.getDate()
        let h = dt.getHours()
        let mi = dt.getMinutes()
        let s = dt.getSeconds()
        document.querySelector(".showTime").innerHTML =
            "当前时间：" +
            y + "年" +
            m + "月" +
            d + "日" +
            h + "时" +
            mi + "分" +
            s + "秒";
        t = setTimeout(time, 1000) //循环打印
    }
    export default {
        name: "AirHeader"
    }
</script>

<style scoped>
    header {
        position: relative;
        height: 1.25rem;
        background: url(../assets/images/head_bg.png) no-repeat;
        background-size: 100% 100%;
    }
    header h1 {
        font-size: 0.475rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
    }
    header .showTime {
        position: absolute;
        top: 0;
        right: 0.375rem;
        line-height: 0.9375rem;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.3rem;
    }
</style>
